<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :cusBack="cusBack" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">统计收益</block>
			</cu-custom>
			<view style="padding: 10px;font-size: 14px;">
				<view style="margin: 10px 0;">
					<text @click="$Router.push('/pages/user/withdrawaldetail')">待提现：{{nowSy}}元</text>
					<text style="margin-left: 20px;">已提现：{{histSy}}元</text>
				</view>
				<view style="margin-bottom: 5px;border-bottom: 1px solid;">
					<text>日期类型：</text>
					<radio-group @change="radioChange">
						<label class="radio" style="margin-right: 10px;">
							<radio value="month" :checked="type === 'month'" />月
						</label>
						<label class="radio">
							<radio value="day" :checked="type === 'day'" />日
						</label>
					</radio-group>
				</view>
				<view style="margin-bottom: 5px;border-bottom: 1px solid;">
					<picker mode="date" :value="date" :fields="type" :start="startDate" :end="endDate"
						@change="bindDateChange1">
						<view class="uni-input">开始日期：{{date1}}</view>
					</picker>
				</view>
				<view style="margin-bottom: 10px;border-bottom: 1px solid;">
					<picker mode="date" :value="date" :fields="type" :start="startDate" :end="endDate"
						@change="bindDateChange2">
						<view class="uni-input">结束日期：{{date2}}</view>
					</picker>
				</view>
				<text class="button" @click="getStatis">查询</text>
				<view style="line-height: 20px;border: 1px solid;display: flex;text-align: center;margin-top: 15px;">
					<view style="width: 50%;border-right: 1px solid;">日期</view>
					<view style="width: 50%;">收益（元）</view>
				</view>
				<view style="max-height: calc(100vh - 280px);overflow: auto;border: 1px solid;text-align: center;line-height: 20px;">
					<view v-for="(item, index) in syList" :key="index" style="display: flex;border-bottom: 1px solid;">
						<view style="width: 50%;border-right: 1px solid;">{{item.day_time}}</view>
						<view style="width: 50%;">{{item.sum_price}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				type: 'day',
				date1: this.getPreDayDate(30),
				date2: this.getPreDayDate(),
				nowSy: 0,
				histSy: 0,
				syList: [],
			};
		},
		onLoad() {
			this.getStatis()
			this.getTx()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			cusBack() {
        this.$Router.back();
				//this.$Router.pushTab('/pages/user/people')
			},
			bindDateChange1(e) {
				this.date1 = e.detail.value
			},
			bindDateChange2(e) {
				this.date2 = e.detail.value
			},
			getPreDayDate(preday = 0) {
				const time = Date.now() - preday * 24 * 3600 * 1000

				const date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			radioChange(val) {
				this.type = val.detail.value
			},
			pickerChange(val) {
				console.log(val, 'pickerChange')
			},
			getTx(){
				this.$http.get('/sys/user/queryById',{params:{id:this.$store.getters.userid}}).then(res=>{
					const data = res.data.result || {}
					this.nowSy = data.nowSy/100
					this.histSy = data.histSy/100
				})
			},
			getStatis() {
				const openId = this.$store.getters.userid
				const params = {
					openId,
					startTime: this.date1,
					endTime: this.date2,
					type: this.type
				}
				this.$http.get('/authority/xcx/getSy', {
					params
				}).then(res => {
					console.log(res)
					this.syList = res?.data?.data || []
				})
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.button {
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
		background-color: green;
		color: #fff;
	}
</style>